<template>
	<div>
		<div class="header">
			<div class="search" @click="route('search')">
				<img src="../../static/img/icon/diary_icon/search@2x.png"/>
			</div>
			<div class="nav">
				 <div>
					<div @click="goToPage('http://120.79.173.209:8080/dist/index.html#/Featured')">精选</div>
					<span  >|</span>
				</div>
				<div   >
					<div @click="goToPage('http://120.79.173.209:8080/dist/index.html#/forum_Component_uptodate')">论坛</div>
					<span class="">|</span>
				</div>
				<div   >
					<div  class="">商城</div>
					 
				</div>

			</div>
			<div class="search">
				<img src="../../static/img/icon/find_icon/equipment@2x_46.png" @click="dialog = !dialog" v-if="navIndex != 2"/>
				<img class="shop" src="../../static/img/icon/find_icon/shoppingcart@3x.png" v-else @click="go('shoppingCart')"/>
			</div>
		</div>
		 
		
		<!--精选-->
		<selected v-if="navIndex == 0"></selected>
		
		<!--论坛-->
		<forum v-if="navIndex == 1"></forum>
		
		<div class="create-fixed" v-if="navIndex == 1" @click="route('createStatus')">
			<img src="../../static/img/icon/home_icon/riji_xuanzhong@2x.png"/>
		</div>
		<div class="create-fixed-left" @tap="couponShow" v-if="navIndex == 2">
			<img src="../../static/img/icon/find_icon/coupon.png"/>
		</div>
		
		<!--商城-->
		<mall v-if="navIndex == 2"></mall>
		
		<div class="mask">
			<div class="mask-bg" @tap="dialog = false" v-if="dialog"></div>
			<div class="content" v-if="dialog">
				<div>
					<div>应用设备</div>
					<div><img src="../../static/img/icon/find_icon/equipment@3x.png"/></div>
				</div>
				<div class="nav">
					<div>
						<div><img src="../../static/img/icon/find_icon/planter@3x.png"/></div>
						<div>智能种植机</div>
					</div>
					<div>
						<div><img src="../../static/img/icon/find_icon/plantlightinglamp@3x.png"/></div>
						<div>植物补光灯</div>
					</div>
				</div>
			</div>
		</div>
		
		<coupon title="优惠券专区" :id="couponId" :list="list" @receive="receiveCoupon" :dialog="show" @hide="hide" @pullup="pullup" @pulldown="pulldown"></coupon>
	</div>
</template>

<script>
	import mall from './mall'
	import coupon from '../base/couponMoreMask'
	import {getData} from '../service/getData'
	import selected from './selected'
	import forum from './forum'
	export default {
		data() {
			return {
				navList :['商城'],
				navIndex: 2,
				navList1 : ['话题', '最新', '热门'],
				navList2: ['推荐','多肉达人','绿植养护','温室培养'],
				navIndex1: 1,
				navIndex2: 0,
				mallList: [],
				list: [],
				show: false,
				data: [],
				data1: [],
				data2: [],
				dialog: false,
				couponPage: 1,
				couponLastPage: 1,
				couponId: '#couponScroll'
			}
		},
		components: {
			mall,
			coupon,
			selected,
			forum
		},
		mounted() {
			 var url=window.location.href;
			  
               sessionStorage.userId = id;

               if(window.location.href.indexOf('#')>-1){
                 var id=window.location.href.split('userId=')[1].split('#/')[0];
               }else{
               	 var id=window.location.href.split('userId=')[1];
               
               }
              	 
            				 
			     getData('/post/getUserById', {
						userId:id
					}).then(d => { 

                      sessionStorage.token = d.extend.user.loginToken;
					  sessionStorage.userId=d.extend.user.userId;
					})	
			 
			if(sessionStorage.index) {
				this.navIndex = sessionStorage.index				
			}

		},
	 
		methods: {
			hide() {  //优惠券隐藏
				this.show = false;

			},
			goToPage(url){
				 
				window.location.href=url;
			},
			pulldown() { //优惠券下拉刷新
				getData('/coupons/getCouponsListApi', {
					pn: 1
				}).then(d => {
					mui(this.couponId).pullRefresh().endPulldownToRefresh(true);
					this.couponLastPage = d.pageInfo.lastPage
					this.list = d.pageInfo.list
				})
			},
			pullup() { //优惠券上拉加载
				if(this.couponLastPage != this.couponPage) {
					getData('/coupons/getCouponsListApi', {
						pn: this.couponPage++
					}).then(d => {
						mui(this.couponId).pullRefresh().endPullupToRefresh();
						this.list = this.list.concat(d.pageInfo.list)
					})					
				} else {
					mui(this.couponId).pullRefresh().endPullupToRefresh(true);
				}
			},
			receiveCoupon(obj) {  //领取优惠券

				getData('/usercoupons/getCouponsCountByUserIdApi', {
					userId: sessionStorage.userId,
					couponsId: obj.CouponsID
				}).then(d => {
					if(d.code == 1) {
						if(d.userCoupons < obj.restrictCount) {
							getData('/usercoupons/collectionOfCouponsApi', {
								userId: sessionStorage.userId,
								couponsId: obj.CouponsID
							}).then(d => {
								mui.toast(d.msg);
							})													
						} else {
							mui.toast('你已经领过了');
						}
					}
				})
			},
			couponShow() {  //优惠券数据
				this.show = true
				getData('/coupons/getCouponsListApi', {
					pn: 1
				}).then(d => {
					this.list = d.pageInfo.list
					this.couponLastPage = d.pageInfo.lastPage
				})
			},
			go(str) {  //跳转保存下标
				sessionStorage.index = 2
				this.route(str)
			},
			plusReady: function () {
                var self = this;
                // 获取定位信息
                this.$geolocation.getCurrentPosition().then(function (position) {
                	console.log(position)
                  //  self.city = position.address.city;
                });
                // 获取网络信息
               alert(this.$network.getCurrentNetworkType())
                //self.networkType = this.$network.getCurrentNetworkType();
            }
		},
	}
</script>

<style scoped lang="less">
 
	.nav {
		display: flex;
		align-items: center;
		color: #000;
		
		div {
			display: flex;
			
			div {
				margin: 0 10px;
			}
			
			.active {
				color: #c9eb59;
				border-bottom: 1px solid #c9eb59;
			}		
			
			span {
				font-size: 12px;
			}
			
			.none {
				display: none;
			}
		}
	}
	
	.create-fixed {
		position: fixed;
		bottom: 10%;
		right: 20px;
		width: 40px;
		height: 40px;
		z-index: 3;
		img {
			width: 100%;
		}
	}
	
	.create-fixed-left {
		position: fixed;
		bottom: 8%;
		right: 20px;
		width: 50px;
		height: 50px;
		text-align: center;
		border-radius: 50%;
		background: #FFF;
		color: #c9eb59;
		/*text-shadow: 1px 1px 4px #000;*/
		box-shadow: 0 0 10px #c9eb59;
		padding: 10px;
		z-index: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		
		img {
			width: 30px;
			height: 20px;
		}
	}
	
	.mask {
		
		
		.mask-bg {
			position: fixed;
			background: rgba(0,0,0,0.6);
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 10;
		}
		
		.content {
			position: fixed;
			top: 0;
			width: 100%;
			height: 150px;
			background: #fff;
			padding: 60px 10px;
			z-index: 11;
			
			div {
				display: flex;
				align-items: center;
				margin-bottom: 5px;
				
				img {
					width: 20px;
					height: 12px;
					margin-left: 5px;
				}
				
			}

			.nav {
					
				div {
					background: #f7f4f4;
					border-radius: 10px;
					margin: 0;
					padding: 2px;
					margin-right: 10px;
					
					img {
						width: 25px;
						height: 25px;
					}
				}
			}
		}
	}
</style>